<template>
  <div>
    case1: <input v-model="message" type="text" />
    <hr />
    case2：<input v-model="message2" type="text" />
    <hr />
    case3：<input v-model="infoObj.foo.bar.num" type="text" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

let message = ref("小宝");
let message2 = ref("大宝");
let infoObj = ref({
  foo: {
    bar: {
      num: 1,
    },
  },
});

// watch 监听单个
// watch(
//   () => message.value,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue);
//   }
// );

// watch 监听多个
// watch([message, message2], ([newValue, newValue2], [oldValue, oldValue2]) => {
//   console.log(newValue, oldValue);
//   console.log(newValue2, oldValue2);
// });

// watch 监听对象（1.引用数据类型要开启深度监听，2.引用数据类型新旧值是相同的，3.只监听引用类型里面的属性值变化需要使用函数形式）
watch(
  () => infoObj,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },
  {
    immediate: true, // 立即执行
    deep: true, // 开启深度监听
    // flush: "pre", // 1.pre 组件加载之前调用；2.sync 同步执行；3.post 组件加载之后调用
  }
);
</script>
